@extends('backend.layouts.app')

@section('content')
<div class="layui-card">
    <div class="layui-card-header layui-card-header-auto">Mbti测评结果</div>
    <div class="layui-card-body">
        <div class="layui-row" style="margin-bottom:10px">
            <form class="layui-form" id="searchForm" action="{{route('admin.business.mbti.user.result.export')}}"
                method="GET">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="name" id="name" class="layui-input" placeholder="姓名">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="school" id="school" class="layui-input" placeholder="学校">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="major" id="major" class="layui-input" placeholder="专业">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="contact_phone" id="contact_phone" class="layui-input"
                            placeholder="手机号码">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="start" id="start" autocomplete="off" class="layui-input"
                            placeholder="开始时间">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="end" id="end" autocomplete="off" class="layui-input"
                            placeholder="结束时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select id="test_type" name="test_type" class="layui-select">
                            <option value="">测评类型</option>
                            <option value="28">28题</option>
                            <option value="93">93题</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select id="degree" name="degree" class="layui-select">
                            <option value="">学历</option>
                            @foreach ($degrees as $degree)
                            <option value="{{$degree['item_detail_id']}}">{{$degree['item_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select id="grade" name="grade" class="layui-select">
                            <option value="">年级</option>
                            @foreach ($grades as $grade)
                            <option value="{{$grade['item_detail_id']}}">{{$grade['item_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select id="come_from" name="come_from" class="layui-select">
                            <option value="">来源</option>
                            <option value="wechat">微信</option>
                            <option value="wanxiao">完美校园</option>
                            <option value="homepage">官网</option>
                            <option value="null">其他</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select name="pay_status" id="pay_status" class="layui-select">
                            <option value="">付款状态</option>
                            <option value="paid">已付款</option>
                            <option value="unpaid">未付款</option>
                            <option value="refunded">已退款</option>
                            <option value="null">未知</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button type="button" onclick="search()" class="layui-btn layui-btn-sm">确定</button>
                    <button type="reset" class="layui-btn layui-btn-sm">清空</button>
                    <button type="button" onclick="exportData()" class="layui-btn layui-btn-sm">导出</button>
                </div>
            </form>
        </div>
        <table lay-filter="dataTable" id="dataTable">
        </table>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    let dataTable;
    layui.use(['layer', 'form', 'table', 'laydate'], function () {
        let layer = layui.layer;
        let form = layui.form;
        let table = layui.table;
        let laydate = layui.laydate;

        dataTable = table.render({
            elem: '#dataTable',
            url: "{{route('admin.business.mbti.user.result.list')}}",
            where: {
                name: $('#name').val(),
                contact_phone: $('#contact_phone').val(),
                school: $('#school').val(),
                major: $('#major').val(),
                start: $('#start').val(),
                end: $('#end').val(),
                test_type: $('#test_type').val(),
                come_from: $('#come_from').val(),
                pay_status: $('#pay_status').val(),
                grade: $('#grade').val(),
                degree: $('#degree').val(),
            },
            page: true,
            cols: [
                [{
                    title: '订单编号',
                    field: 'unifiedorder_id',
                    width: 120
                }, 
                // {
                //     title: '姓名',
                //     field: 'user_true_name'
                // }, 
                {
                    title: '昵称',
                    field: 'user_nickname'
                }, {
                    title: '学校',
                    field: 'user_school_name'
                }, {
                    title: '专业',
                    field: 'user_major_name'
                }, {
                    title: '年级',
                    field: 'user_grade_name'
                }, {
                    title: '学历',
                    field: 'user_degree_name'
                }, {
                    title: '手机号',
                    field: 'user_contact_phone'
                }, {
                    title: '类型',
                    field: 'test_type_des'
                }, {
                    title: '测评时间',
                    field: 'created_at'
                }, {
                    title: '测评结果',
                    field: 'result'
                }, {
                    title: '来源',
                    field: 'come_from_name'
                }, {
                    title: '支付状态',
                    field: 'pay_status_name'
                }]
            ]
        });

        laydate.render({
            elem: '#start',
            type: 'datetime'
        });

        laydate.render({
            elem: '#end',
            type: 'datetime'
        });

    });

    function search() {
        dataTable.reload({
            where: {
                name: $('#name').val(),
                contact_phone: $('#contact_phone').val(),
                school: $('#school').val(),
                major: $('#major').val(),
                start: $('#start').val(),
                end: $('#end').val(),
                test_type: $('#test_type').val(),
                come_from: $('#come_from').val(),
                pay_status: $('#pay_status').val(),
                grade: $('#grade').val(),
                degree: $('#degree').val(),
            },
            page: {
                curr: 1
            }
        });
    }

    function exportData(){
        var form = document.getElementById('searchForm');
        form.submit();
    }

</script>
@endsection